import React from 'react';
import { Form, Input, Button, Select,message} from 'antd';
import ImgUpload from '../../components/imgUpload';
import {tradePub} from '../../api/trade'
const { Option } = Select;
const layout = {
  labelCol: {
    span: 4,
  },
  wrapperCol: {
    span: 16,
  },
};
const tailLayout = {
  wrapperCol: {
    offset: 8,
    span: 16,
  },
};

export default class TradePub extends React.Component {
  constructor(){
    super()
    this.state = {
      imageUrl:'',
      showAlert:false,
      showImg:true
    }
  }
  formRef = React.createRef();
  onFinish = (values) => {
    let {imageUrl} = this.state;
    if(imageUrl){
      values.imageUrl = imageUrl;
      tradePub(values).then(res=>{
       this.setState({
         imageUrl:'',
         showImg:false
       })
       this.onReset()

      })
    }else{
      message.error('请上传行业图片');
    }
  };

  onReset = () => {
    this.formRef.current.resetFields();
    this.setState({
      imageUrl:'',
      showImg:false
    })
  };
  handlePath = (imageUrl)=>{
    this.setState({
      imageUrl,
      showImg:true
    })
  }
  render() {
    return (
      <Form {...layout} ref={this.formRef} name="control-ref" onFinish={this.onFinish}>
        <Form.Item
          name="tradename"
          label="行业名称"
          rules={[
            {
              required: true,
            },
          ]}
        >
          <Input />
        </Form.Item>
        <Form.Item name="hot" label="是否热推" rules={[{ required: true }]}>
          <Select
            placeholder="选择热推将在首页展示"
            allowClear
          >
            <Option value="1">是</Option>
            <Option value="0">否</Option>
          </Select>
        </Form.Item>
        <Form.Item label="图片标志">
          <ImgUpload handlePath={this.handlePath} showImg={this.state.showImg}/>
        </Form.Item>
        <Form.Item {...tailLayout}>
          <Button type="primary" htmlType="submit">
            确认发布
          </Button>
          <Button htmlType="button" onClick={this.onReset}>
            重置
          </Button>
        </Form.Item>
      </Form>
    );
  }
}

